<script setup>
import { onMounted, watch } from "@vue/runtime-core";
import * as echarts from "echarts";
import { theme } from "../assets/js/theme.js";

const props = defineProps(["emissionLineData", "province"]);
const emit = defineEmits([]);

var myChart;
var option;

option = {
  tooltip: {
    trigger: "axis",
  },
  title: {
    left: "center",
    top: "0",
    textStyle: {
      fontWeight: "560",
      fontSize: 12,
      lineHeight: 4,
      height: 4,
    },
  },
  grid: {
    top: "22%",
    bottom: "15%",
    left: "19%",
    right: "3.9%",
  },
  xAxis: {
    type: "category",
    // boundaryGap: false,
  },
  yAxis: {
    type: "value",
    axisLabel: {
      // 倾斜效果
      rotate: 20,
      interval: 0,
    },
    // boundaryGap: [0, "30%"],
  },
  series: [],
};

watch(
  () => [props.emissionLineData, props.province],
  () => {
    let option = {
      title: {
        text: props.province.name + "排放趋势",
      },
      xAxis: {
        data: props.emissionLineData.years,
      },
      series: [
        {
          type: "line",
          smooth: 0.5,
          // symbol: 'none', // 显示节点
          data: props.emissionLineData.value,
          areaStyle: {},
        },
      ],
    };
    myChart.setOption(option);
  },
  { deep: true },
  { immediate: true }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("emissionLine"), theme);

  myChart.setOption(option);
});
</script>

<template>
  <div class="module">
    <div id="emissionLine"></div>
  </div>
</template>

<style lang="scss" scoped>
.module {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#emissionLine {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  padding: 0.2rem;
}
</style>
